@extends('admin::layouts.master')

@section('title', $name)

@section('content')
  <div id="app">
    <el-alert
      :closable="false"
      title="facebook/instagram/google adwords/twitter/tiktok/yahoo/bing等审核访问时，一但匹配到了自定义地址，则输出自定义地址的页面内容，未匹配上，则统一输出默认类型地址的页面内容，正常用户则不影响（如果插件开启了《全部跳转》则全部都输出第一个默认类型地址的页面）"
      type="success">
    </el-alert>
    <el-button
      type="danger"
      @click="openEditPop(null,'add')">
      新增
    </el-button>
    <br>
    <br>
    <el-table
      :data="cloakUrlsData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="url_from"
        label="用户访问链接">
      </el-table-column>
      <el-table-column
        prop="url_to"
        label="实际指向链接">
      </el-table-column>
      <el-table-column
        prop="type_str"
        label="类型">
      </el-table-column>

      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="openEditPop(scope.row,'edit')">
            编辑
          </el-button>

          <el-button
            size="mini"
            type="warn"
            @click="rowDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="Pagination">
      <el-pagination
        @current-change="handlecloakUrlsPageChange"
        :current-page="cloakUrlsPage.page"
        :page-size="cloakUrlsPage.pageSize"
        layout="total, prev, pager, next"
        :total="cloakUrlsPage.total">
      </el-pagination>
    </div>

    <el-dialog title="新增/修改" :visible.sync="dialogFormVisible" :close-on-click-modal="!dialogFormVisible">
      <el-form :model="cloak">
        <el-form-item label="名称" label-width="120">
          <el-input v-model="cloak.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户访问链接" label-width="120">
          <el-input v-model="cloak.url_from" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实际指向链接" label-width="120">
          <el-input v-model="cloak.url_to" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接类型" label-width="120px">
          <el-select v-model="cloak.type" filterable placeholder="请选择">
            <el-option
              v-for="type, index in types"
              :key="index"
              :label="type.label"
              :value="type.val">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" label-width="120">
          <el-input-number v-model="cloak.sort"></el-input-number>
        </el-form-item>
        <el-alert
          :closable="false"
          title="facebook/instagram/google adwords/twitter/tiktok/yahoo/bing等审核访问时，一但匹配到了自定义地址，则输出自定义地址的页面内容，未匹配上，则统一输出默认类型地址的页面内容，正常用户则不影响（如果插件开启了《全部跳转》则全部都输出第一个默认类型地址的页面"
          type="success">
        </el-alert>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCloak">确 定</el-button>
      </div>
    </el-dialog>

  </div>
@endsection

@push('footer')
  <script>
    new Vue({
      el: '#app',
      data: function () {
        return {
          cloakUrlsPage: {
            page: 1,
            pageSize: 20,
            q: '',
            total: 0,
            parent_customer_id: 0,
          },
          cloakUrlsData: [],
          cloak: {id: 0, name: "", url_from: "", url_to: "", type: 1, sort: 50},
          dialogFormVisible: false,
          types: [
            {'val': 1, 'label': "默认链接"},
            {'val': 2, 'label': "自定义链接"}
          ],
        }
      },
      created() {
        this.getUsers();
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        },


        getUsers() {
          let that = this;
          $http.get("{{admin_route('ad_cloak.urls')}}", this.cloakUrlsPage).then((res) => {
            console.log(res);
            that.cloakUrlsData = res.urls.data;
            that.cloakUrlsPage.page = res.urls.current_page;
            that.cloakUrlsPage.pageSize = res.urls.per_page;
            that.cloakUrlsPage.total = res.urls.total;

          })
        },

        handlecloakUrlsPageChange(val) {
          this.cloakUrlsPage.page = val;
          this.cloakUrlsPage.offset = (val - 1) * this.cloakUrlsPage.pageSize;
          this.getUsers()
        },

        openEditPop(row, action) {
          if (action == 'edit') {
            this.cloak.id = row.id;
            this.cloak.name = row.name;
            this.cloak.url_from = row.url_from;
            this.cloak.url_to = row.url_to;
            this.cloak.type = row.type;
            this.cloak.sort = row.sort;
          } else {

            this.cloak = {id: 0, name: "", url_from: "", url_to: "", type: 1, sort: 50};
          }
          this.dialogFormVisible = true;
        },
        saveCloak() {
          let that = this;
          $http.post("{{admin_route('ad_cloak.urls')}}", this.cloak).then((res) => {
            if (res.code == 0) {
              layer.msg("操作成功")
              //window.location.reload();
              this.dialogFormVisible = false;
              that.getUsers()
            } else {
              layer.msg(res.msg)
            }
          })
        },


        rowDelete(row) {
          let that = this;
          let tip = '确定要将 ' + row.name + ' 删除吗？'
          layer.confirm(tip, {
            title: "{{ __('common.text_hint') }}",
            btn: ['{{ __('common.cancel') }}', '{{ __('common.confirm') }}'],
            area: ['400px'],
            btn2: () => {
              $http.delete("{{admin_route('ad_cloak.urls')}}", {'id': row.id}).then((res) => {
                if (res.code == 0) {
                  layer.msg("删除成功")
                  that.getUsers()
                } else {
                  layer.msg(res.msg)
                }
              })
            }
          })
        },


      }
    })
  </script>
@endpush
